﻿@model Zatify.WebUI.Models.DealsMapViewModel
@{
    ViewBag.Title = "DealsMap";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script language="javascript" type="text/javascript">
    
    var map;
    
    var mgr;
 
    
    function initialize() {
        
        var myOptions = {
            
            zoom: 8,
            
            center: new google.maps.LatLng(@Model.CenterCoordinates.Latitude, @Model.CenterCoordinates.Longitude),
            
            mapTypeId: google.maps.MapTypeId.ROADMAP
        
        };
        
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        mgr = new MarkerManager(map);
        
        var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });

        google.maps.event.addListener(mgr, 'loaded', function () {
            
            @foreach (var item in Model.Promotions)
            {
                if (item.Business.Latitude.HasValue && item.Business.Longitude.HasValue)
                {
                <text>
                
                var marker = new google.maps.Marker({
                    
                    position: new google.maps.LatLng(@item.Business.Latitude, @item.Business.Longitude),
                    
                    html: "<a href='@Url.Action("BusinessDetails","UserProfile", new { id = @item.Business.BusinessId })'><p><strong>@item.Business.BusinessName</strong><br />@item.Business.StreetAddress1</p></a>"
                
                });
 
                
                google.maps.event.addListener(marker, "click", function () {
                    
                    infoWindow.setContent(this.html);
                    
                    infoWindow.open(map, this);
                
                });
 
                
                mgr.addMarker(marker, 0);
                
                </text>
                }
            }
            
            mgr.refresh();
        
        });
    
    }

    function OnCityChanged() 
    {
        var selectedOption = $("#citySelector option[value='" + $("#citySelector").val() + "']");

        map.setCenter(new google.maps.LatLng(parseFloat(selectedOption.data("lat")), parseFloat(selectedOption.data("long"))));
    }
    
    $(document).ready(function () {
        
        initialize();
    
    });
</script>
<div class="wrapper">
    @if (Model.ShowCityStateSelector)
    {
        <div class="bradcum_search">
            @Html.Partial("CityStateSelectorControl", Model.GeoLocations)
        </div>
        <div class="clearfix">
        </div>
    }
    <!--inner container-->
    <div class="inner_container">
        <h2>@Model.PageTitle - Map<a href="@Model.ReturnUrl" class="red_btn" style="float: right;">
            List</a></h2>
        <div class="details_banner z_location_map" style="width: 940px; height: 600px;">
            <div id="map_canvas" style="height: 600px;">
            </div>
        </div>
    </div>
    <!--end inner container-->
    <div class="clearfix">
    </div>
</div>